<template>
<div class="container">
  <div class="header">
    <div class="header-left"><img class="logo" src="@/assets/logo.png" alt="">
      <span class="title">协会管理系统</span>
    </div>
    <div class="header-right">
      已有账号,
      <el-button type="text" @click="login">立即登录</el-button>
    </div>
  </div>
  <!-- 注册主页 -->
  <div class="main">
    <div class="center-top">注册信息&nbsp;<span style="color:#97a8be">>&nbsp;协会认证</span></div>
    <div class="center-content">
      <el-tabs type="card">
        <el-tab-pane label="手机注册">
          <el-form ref="formPhone" class="form" :model="formPhone" label-width="100px">
            <my-input label="手机号" v-model="formPhone.account" prop="account" placeholder="请输入手机号" required mobile />
            <div style="position: relative;">
              <my-input label="验证码" v-model="formPhone.verifyCode" prop="verifyCode" placeholder="短信验证码" :clearable="false" required />
              <el-button type="text" class="code" v-show="Verification" @click="handleClickPhone">发送验证码</el-button>
              <el-button type="text" class="code-time" v-show="!Verification"><span>{{timer}}</span>s</el-button>
            </div>
            <my-input label="登录密码" :type="passwordType" v-model="formPhone.password" prop="password" placeholder="请输入密码" required />
            <my-input label="密码确认" :type="passwordType" v-model="formPhone.repassword" prop="repassword" placeholder="请再次输入密码" required />
            <el-button class="register-btn" @click="handleRegister('formPhone')">立即注册</el-button>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="人工通道">
          <el-form label-width="100px" style="padding-top:52px">
            <div class="item">
              <div class="item-img"><i class="el-icon-service" style="font-size:55px;color: #FFBE5E;" /></div>
              <div class="item-info">
                <div class="item-info-desc">客服咨询热线</div>
                <div class="item-info-phone">111-222-3333</div>
              </div>
            </div>
            <div class="tips">注册拨打客服电话，由平台为您创建账号，省去操作时间</div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <!-- 成功弹窗 -->
  <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
    <div class="center">
      <img class="logo" src="@/assets/ic_circle_login_was_successful.png" alt="">
      <div class="center-success">注册成功</div>
      <div class="center-finish">账号已注册成功！请完成协会认证</div>
      <el-button class="register-btn" style="color: #fff;" @click="handleAuthentication">前往协会认证</el-button>
      <el-button type="text" @click="login" style="margin-top:32px;color:#2E5BFF">暂不认证</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
import {
  Reg_Phone
} from '@/utils/external/regexp'
export default {
  data() {
    return {
      formPhone: {
        account: "",
        password: "",
        verifyCode: "",
        repassword: "",
      },
      passwordType: "password",
      Verification: true, //通过v-show控制显示获取还是倒计时
      timer: 60, //定义初始时间为60s
      dialogVisible: false
    };
  },
  methods: {
    // 验证两次密码是否一致
    extraCheck() {
      if (this.formPhone.password != this.formPhone.repassword) {
        this.$message.warning("两次输入的密码不一致")
        return false
      }
      // this.formPhone.password = md5(this.formPhone.password)
      return true
    },
    login() {
      this.$router.push({
        name: 'login'
      })
    },
    // 验证手机号码
    checkPhoneNumber() {
      if (Reg_Phone(this.formPhone.account)) {
        return true
      }
      return false
    },
    // 验证码
    handleClickPhone() {
      if (!this.checkPhoneNumber(this.formPhone.account)) {
        return this.$message.warning('请先输入手机号码');
      } else {
        this.Verification = false;
        let auth_timer = setInterval(() => {
          this.timer--;
          if (this.timer <= 0) {
            this.Verification = true;
            clearInterval(auth_timer)
            this.timer = 60;
          }
        }, 1000)
        this.formPhone.verifyCode = '1234'
      }
    },
    // 注册
    handleRegister(formPhone) {
      this.$refs[formPhone].validate(async valid => {
        if (valid) {
          if (!this.extraCheck(formPhone)) {
            return
          }
          try {
            //removeToken();
            // const res = await userApi.register(this.formPhone)
            // console.log(res)
            // this.form = res
            this.dialogVisible = true
          } catch (err) {
            this.$message.warning(err)
          }

        } else {
          this.$message.warning('请完善数据')
        }
      })
    },
    handleAuthentication() {
      this.$router.push({
        name: 'authentication',
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？关闭后返回登录页')
        .then(_ => {
          this.$router.push({
            name: 'login',
          })
        })
        .catch(_ => {});
    }
  }
};
</script>

<style lang="scss" scoped>
$theme:#2E5BFF;

.container {
  background-color: #F0F2F5;
  height: 100%;

  .header {

    background-color: #FFFFFF;
    height: 72px !important;
    width: 100%;

    .header-left {
      float: left;
      margin-left: 343px;

      .logo {
        width: 50px;
        height: 50px;
        margin-top: 11px;
        float: left;

      }

      .title {
        font-size: 28px;
        font-family: PingFangSC-Regular;
        text-align: center;
        color: #000000;
        margin-left: 18px;
        float: left;
        margin-top: 22px;
      }
    }

    .header-right {
      float: right;
      margin-right: 383px;
      padding-top: 26px
    }
  }

  /deep/ .el-tabs__nav {
    width: 100%;
    display: flex;

  }

  .main {
    background-color: #FFFFFF;
    width: 1200px;
    height: 650px;
    margin: 30px auto;

    .center-top {
      padding: 36px 0 0 56px
    }

    .center-content {
      width: 650px;
      margin: 68px auto;

      .form {
        padding: 51px 0 0 95px;
      }

      /deep/ .el-tabs__item {
        flex: 1;
        width: 203px !important;
        text-align: center;
      }

      /deep/ .el-tabs__item.is-active {
        background-color: $theme;
        color: #ffffff;
      }

      /deep/ .el-input {
        min-width: 300px !important;
      }

      .item {
        width: 320px;
        height: 105px;
        display: flex;
        background-color: #FFFBF5;
        border: 1px solid #FFE9CA;
        padding: 25px 0 0 35px;
        margin: 0 auto;

        .item-info {
          margin-left: 24px;

          .item-info-desc {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 300;
            color: #666666;
            line-height: 30px;
          }

          .item-info-phone {
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 30px;

          }
        }

      }

      .tips {
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 300;
        color: #666666;
        margin: 0 auto;
        display: table;
        margin-top: 54px
      }
    }

    .center-bottom {
      display: table;
      margin: 0 auto;
    }

    /deep/ .register-btn {
      width: 280px;
      margin-top: 20px;
      margin-left: 110px;
      background-color: $theme;
      color: #ffffff !important;

      &:hover {
        background-color: #2e77e6;
      }
    }

    .code {
      position: absolute;
      left: 310px;
      top: 0;
      z-index: 1;
      font-size: 12px;
      color: #2E5BFF;
      cursor: pointer;
    }

    .code-time {
      position: absolute;
      left: 330px;
      top: 0px;
      z-index: 1;
      font-size: 14px;
      color: #2E5BFF;
      cursor: pointer;
    }
  }
}

.center {
  height: 600px;
  display: flex;
  flex-direction: column;

  .logo {
    width: 158px;
    height: 164px;
    margin: 0 auto;
  }

  .center-success {
    margin-top: 25px;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 30px;
    align-self: center;
  }

  .center-finish {

    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 300;
    color: #666666;
    align-self: center;
    margin: 31px 0 60px 0;
  }

  .register-btn {
    align-self: center;
    width: 30%;
    background-color: $theme;

    &:hover {
      background-color: #2e77e6;
    }
  }
}
</style>
